﻿<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="vtc" uri="/ls-trade-tags"%>
<%@ include file="/common/taglibs.jsp"%>
<html>
<head>
	<title>Category Maintenance</title>
</head>
<body>

<script type="text/javascript">
	$(document).ready(function() {
		$("#categoryForm").validate({
		rules: {
				"category.planYear": {
					required: true,
					digits:true
				},
				"category.planningExerciseName": {
					required: true,
					maxlength:100
				},
				"category.level1Start": {
					required: true,
					digits:true,
					maxlength:4
				},
				"category.level1End": {
					required: true,
					digits:true,
					maxlength:4
				},
				"category.level2Start": {
					required: true,
					digits:true,
					maxlength:4
				},
				"category.level2End": {
					required: true,
					digits:true,
					maxlength:4
				},
				"category.level3Start": {
					required: true,
					digits:true,
					maxlength:4
				},
				"category.level3End": {
					required: true,
					digits:true,
					maxlength:4
				}
			}
		 });
	});
	
	function save() {
		var _value = document.getElementById("planYear").value;
		if (!isNaN(_value) && _value != "" && _value.length == 4) {
			$("#categoryForm").attr('action', 'category!save.action');
			$("#categoryForm").submit();
		}
		
	}
	function cancel() {
		window.location="category.action";
	}
	function planYearOnBlur(thisObj) {
		var _value = thisObj.value;
		if (!isNaN(_value) && _value != "" && _value.length == 4) {
			var toYear = parseInt(_value) + 1;
			var toYearStr = toYear.toString().substring(2,4);
			
			document.getElementById("toYear").value = toYearStr;
			if (document.getElementById("error").innerHTML.length > 0) {
				document.getElementById("error").innerHTML="";
			}
		} else {
			document.getElementById("error").innerHTML="Please input valid ‘Planning Exercise’, the format should be ‘YYYY’";
			document.getElementById("toYear").value = "";
		}
	}
	
	function saveAsNew(){
		$("#categoryForm").attr('action', 'category!saveAsNew.action');
		$("#categoryForm").submit();
	}
	
	function clickBtn(action,id){
		
		switch(action){
		
		case "editPlanning":
			window.location="<s:url value='/planfirst'/>/plan-first!input.action?level1PlanningId="+id;
			return;
			
		case "createPlanning":
			window.location="<s:url value='/planfirst'/>/plan-first!input.action?level1Planning.category.id="+id;
			return;
			
		case "saveAsNewWithPlanning":
			$("#categoryForm").attr('action', 'category!saveAsNewWithPlanning.action');
			break;
			
		}
		
		$("#categoryForm").submit();
	}
	
	function deleteCategory(categoryId){
		if(confirm('Confirm to delete ?')){
			$("#categoryForm").attr('action', 'category!delete.action?deleteFromPage=input&categoryId='+categoryId);
			$("#categoryForm").submit();
		}
	}
</script>
<div class="content">
	<!-- InstanceBeginEditable name="content" -->
	<div class="pageTitle">Planning Exercise Maintenance</div>
	<form id="categoryForm" method="post" action="">
	<div class="form2">
	  <s:actionerror/>
	  <s:fielderror id="fielderror" />
	  <s:actionmessage/> 
	  <strong><font color="red" ><div id="error"></div></font></strong>
		
			<s:hidden id="categoryId" name="category.id"></s:hidden>
			<s:hidden id="ownerNodeId" name="category.ownerNode.id"/>
			<s:hidden id="isArchivedImage" name="category.isArchivedImage"/>
			<s:hidden id="endorsementStatus" name="category.endorsementStatus"/>
			<s:hidden id="endorsementTime" name="category.endorsementTime"/>
			<table border="0" cellspacing="0" cellpadding="0" bordercolor="red">
				<tr>
					<td class="sep"><img src="../images/spacer.gif"
						style="width: 150px;" /></td>
					<td class="sep"><img src="../images/spacer.gif"
						style="width: 150px;" /></td>
					<td class="sep sep2"><img src="../images/spacer.gif" /></td>
				</tr>
				<tr>
					<td><label class="fLabel">Planning Exercise </label>
						<div class="fField">
							<s:textfield id="planYear" name="category.planYear"
								class="inputText" style="width:50px" maxlength="4"
								theme="simple" onblur="planYearOnBlur(this)" cssClass="required"></s:textfield>
							/
							<s:textfield id="toYear" name="toYear" class="inputText"
								style="width:50px" readonly="true" theme="simple"></s:textfield>
								<script>
								var year = "<s:property value='category.planYear'/>";
								if(year!=null && year!='' && year!=0){
									var toYear = parseInt(year) + 1;
									var toYearStr = toYear.toString().substring(2,4);
									
									document.getElementById("toYear").value = toYearStr;
								}
								if(year==0){
									document.getElementById("toYear").value = "";
									document.getElementById("planYear").value = "";
								}
								//else{
								//	document.getElementById("planYear").value = "";
								//}
							</script>
						</div></td>
					<td><label class="fLabel">Planning Exercise Name</label>
						<div class="fField">
							<s:textfield id="planningExerciseName" name="category.planningExerciseName" class="inputText"
								style="width:300px" theme="simple" cssClass="required"></s:textfield>
						</div></td>
						
						<s:if test="category.branchName!=null && category.branchName!='' ">
					<td><label class="fLabel" >Branch Name </label>
                                 <div class="fField">
                                   <s:textfield class="inputText" id="brachName" name="category.branchName" style="width:200px" cssClass="required"/>
                                 </div></td>
                                 </s:if>

				</tr>
                     
                <tr>
                        <td colspan="3"><label class="fLabel" >Planning Horizon</label>
                          <div class="fField">
                            <div style="float:left; width:100px"> 1st Level </div>
                            <s:textfield class="inputText" id="level1Start" name="category.level1Start" style="width:50px;"  cssClass="required"/>
                            -
                            <s:textfield class="inputText" id="level1End" name="category.level1End" style="width:50px;"  cssClass="required"/>
                          </div>
                          <div class="fField">
                            <div style="float:left; width:100px"> 2nd Level </div>
                            <s:textfield class="inputText" id="level2Start" name="category.level2Start" style="width:50px;"  cssClass="required"/>
                            -
                            <s:textfield class="inputText" id="level2End" name="category.level2End" style="width:50px;"  cssClass="required"/>
                          </div>
                          <div class="fField">
                            <div style="float:left; width:100px"> 3rd Level </div>
                            <s:textfield class="inputText" id="level3Start" name="category.level3Start" style="width:50px;"  cssClass="required"/>
                            -
                            <s:textfield class="inputText" id="level3End" name="category.level3End" style="width:50px;"  cssClass="required"/>
                          </div></td>
                </tr>
                <tr>
                	<td colspan="3">
                	<br/>
	                <div class="button">
							<div class="left">
								<div class="right">
								<security:authorize access="hasAnyRole('PLANNING_EXERCISE_INSERT','PLANNING_EXERCISE_UPDATE')">
									<input class="inputButton" type="button" id="" name=""
										value="Save" onclick="save()" />
										</security:authorize>
								</div>
							</div>
						</div>
						
						<s:if test="category.branchName!=null && category.branchName!=''">
					
						<div class="button" >
	                      <div class="left" >
	                        <div class="right" >
	                        <security:authorize access="hasRole('BRANCH_TREE')">
	                          <input class="inputButton" type="button" id="" name="" 
	                          value="Save As New" onclick="saveAsNew()"/>
	                          </security:authorize>
	                        </div>
	                      </div>
	                    </div>
	                    
	                   <s:if test="level1PlanningId!=null&&level1PlanningId!=''">  
						<div class="button" >
	                      <div class="left" >
	                        <div class="right" >
	                        <security:authorize access="hasRole('BRANCH_TREE')">
	                          <input class="inputButton" type="button" id="" name="" 
	                          value="Save As New with Plan" onclick="clickBtn('saveAsNewWithPlanning','<s:property value='category.id'/>')"/>
	                        </security:authorize>
	                        </div>
	                      </div>
	                    </div>
	                   </s:if> 
                    </s:if>
                    
                    
                    <s:if test="%{category.id!=null && category.id!=''}">
                    <security:authorize access="hasRole('PLANNING_EXERCISE_DELETE')">
                    <div class="button">
						<div class="left">
							<div class="right">
								<input class="inputButton" type="button" id="" name=""
									value="<s:text name='common.btn.delete'/>"  onclick="deleteCategory('<s:property value="%{category.id}"/>')" />
							</div>
						</div>
					</div>
					</security:authorize>
                    	</s:if>
					<div class="button">
						<div class="left">
							<div class="right">
								<input class="inputButton" type="button" id="" name=""
									value="Cancel" onclick="cancel()" />
							</div>
						</div>
					</div>
                    
					</td>
					
                </tr>
                </table>
              
	</div>
	<div class="form2">
	  <table >
                <tr>
                <td colspan="3">
					<div class="btnSet btnSetTypeA" align="left">
						<s:if test="category.branchName!=null && category.branchName!=''">
	                       <s:if test="level1PlanningId!=null&&level1PlanningId!=''">
	                       		<security:authorize access="hasRole('BRANCH_TREE')">
		                           <div class="button" >
				                      <div class="right" >
				                        <div class="left" >			                       
					                       <input class="inputButton" type="button" id="" name="" 
					                          		   value="Edit 1st Level Plan" onclick="clickBtn('editPlanning','<s:property value='level1PlanningId'/>')"/>
									   </div>
			                       	</div>
			                      </div>
							    </security:authorize>	                       
							</s:if>
        				    <s:else>
	        				    <security:authorize access="hasRole('BRANCH_TREE')">
                                          <div class="button" >
					                      <div class="right" >
					                        <div class="left" >			        				    
						                       <input class="inputButton" type="button" id="" name="" 
					                                  value="Create 1st Level Plan" onclick="clickBtn('createPlanning','<s:property value='category.id'/>')"/>
										    </div>
				                          </div>
				                       </div>				                   
			                    </security:authorize>
		                    </s:else>	                        
	                    </s:if>
					</div>
                </td>
                </tr>
			</table>
			</div>
	</form>
	
	<s:if test="%{category.id!=null && category.id!=''}">
		<table border="0" cellspacing="0" cellpadding="0" width="100%">
			<tr>
				<td style="vertical-align: top; width: 300px">
					<iframe
						name="catTree" src="category!loadCategoryTree.action?no-decorate&categoryId=<s:property value='category.id'/>"
						class="oIframe" frameborder="0" style="height: 600px; margin: 0px"
						scrolling="no">
					</iframe>
				</td>
				<td style="width: 5px;">&nbsp;</td>
				<td style="vertical-align: top">
					<iframe name="catForm" id="catForm"
						src="about:blank" class="oIframe" frameborder="0"
						style="height: 600px; margin: 0px" scrolling="yes"> 
					</iframe>
				</td>
			</tr>
		</table>
	</s:if>
	
	<!-- InstanceEndEditable -->
	<script>
	function checkReadOnly(){
		var id = "<s:property value='category.id'/>";
		if(id==null || id=="")
			return false;
		document.getElementById("planYear").readOnly=true;
		document.getElementById("level1Start").readOnly=true;
		document.getElementById("level1End").readOnly=true;
		document.getElementById("level2Start").readOnly=true;
		document.getElementById("level2End").readOnly=true;
		document.getElementById("level3Start").readOnly=true;
		document.getElementById("level3End").readOnly=true;
		
		var branchName = "<s:property value='category.branchName'/>";
		var related = "<s:property value='related'/>";
		//document.getElementById("planningExerciseName").readOnly="";
		if(branchName!=null && branchName!=""){
			document.getElementById("planningExerciseName").readOnly=true;
		}
		if(related=="true"){
			document.getElementById("planningExerciseName").readOnly=true;
		}
	}
	checkReadOnly();
	</script>
</div>

</body>
</html>
